<script lang="ts" setup>
import { getImg } from "@/utils";

const searchValue = ref("");
const router = useRouter();
const { types } = useTypes();
const { games } = useGamesData();
const searchGames = computed(() => {
  // 忽略大小写搜索
  return unref(searchValue)
    ? games.value.filter((item) =>
        item.name.toLowerCase().includes(unref(searchValue).toLowerCase())
      )
    : [];
});

const searchType = (type: string) => {
  router.push({
    path: "/SchRes",
    query: {
      type,
    },
  });
};

const isComposing = ref(false);
const onInput = (e: Event) => {
  if (!isComposing.value) {
    searchValue.value = (e.target as HTMLInputElement).value;
  }
};

const onCompositionStart = () => {
  isComposing.value = true;
};

const onCompositionEnd = (e: Event) => {
  isComposing.value = false;
  onInput(e); // 在输入法输入完成后触发
};
</script>
<template>
  <div>
    <div
      class="sticky left-0 top-0 w-full h-42 bg-[#fff] shadow-[0px_1px_3px_0px_rgba(0,0,0,0.2)] flex justify-start items-center"
    >
      <div class="mx-16 h-full flex-center">
        <img
          @click="router.back()"
          class="h-20"
          :src="getImg('zy_fh.png')"
          alt=""
        />
      </div>
      <div class="w-294 h-29 relative">
        <img
          class="w-16 h-17 absolute left-11 top-50% translate-y-[-50%]"
          :src="getImg('ss_ss.png')"
          alt=""
        />
        <input
          ref="iptRef"
          class="w-full h-full rounded-29 bg-[#F3F3F3] pl-35 text-16 color-[#333]"
          type="text"
          @input="onInput"
          @compositionstart="onCompositionStart"
          @compositionend="onCompositionEnd"
        />
      </div>
    </div>
    <div v-if="!searchValue">
      <ul>
        <li
          v-for="it in types"
          :key="it.name"
          class="w-full h-47 lh-47 flex justify-start items-center pl-16 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.2)]"
          @click="searchType(it.name)"
        >
          <img class="w-23 h-23 mr-10" :src="it.icon" alt="" />
          <span class="text-16 font-600">{{ it.name }}</span>
        </li>
      </ul>
    </div>
    <GameList class="mt-16" v-else title="Search Games" :data="searchGames" />
    <!-- <SchIpt /> -->
    <!-- <SchList /> -->
  </div>
</template>
